<template>
  <view>
    <uv-toast ref="uToast"></uv-toast>
    <uv-no-network></uv-no-network>
    <Nav title="我的订单"></Nav>
    <Header></Header>
    <view class="layout">
      <view class="tab">
        <uv-tabs :list="list"
                 :scrollable="false"
                 @click="selectTab"
                 custom-style="width: 100%"></uv-tabs>
      </view>
      <view class="menu">
        <Menu :goods="filteredGoods" />
      </view>
    </view>
  </view>
</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import Header from "@/components/header.vue";
import Nav from "@/components/nav.vue";
import Menu from "@/components/menu.vue";
import {getOrder} from "@/request/api";

const list = ref([
  { name: '全部' },
  { name: '待付款' },
  { name: '待发货' },
  { name: '待收货' }
]);

const selectedTab = ref('全部'); // 当前选中的标签

const goods = ref([]);
const pageNum = ref(1)
onMounted(() => {
  getOrder({pageNum: pageNum.value, pageSize: 10}).then(res => {
    // console.log(res, '订单---')
    if (res.code === 0) {
      // console.log(res.result.list, '0000');
      goods.value = res.result.list.flatMap(item => {
        const goodsInfo = JSON.parse(item.goods_info);
        const order_code = item.order_code;
        return goodsInfo.map(good => {
          return {
            id: good.id,
            img: good.goods_img,
            title: good.goods_name,
            price: good.goods_price,
            status: '待发货',
            quantity: good.number,
            order_code: order_code
          };
        });
      });
      console.log(goods.value, '0000---')
      if (res.result.total > 10) {
        return getOrder({pageNum: pageNum.value, pageSize: res.result.total});
      }
    }
  })
})
const selectTab = (item) => {
  selectedTab.value = item.name; // 更新选中的标签
  // console.log('Selected tab:', item.name);
};
const filteredGoods = computed(() => {
  if (selectedTab.value === '全部') {
    return goods.value;
  }
  return goods.value.filter(item => item.status === selectedTab.value);
});
</script>

<style scoped lang="scss">
.layout {
  width: 100%;
  height: calc(100% - 88px);
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  background-color: #f5f7fa;
  .tab {
    width: 100%;
    background-color: #FFFFFF;
    position: fixed;
    z-index: 999;
  }
}
</style>